<template>
<div class="treeClass">
  <vxe-table
      border
      resizable
      show-overflow="tooltip"
      highlight-current-row
      row-id="id"
      header-align="center"
      align="center"
      :tree-config="{lazy: true,children: 'children',expandRowKeys: defaultExpandKeys,line: true , hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
      :data="datalist">
    <vxe-table-column field="name" width="100%" title="区域" tree-node>
      <template v-slot="{ row }">
        <div @click="cellClickEvent(row)">{{row.name}}</div>
      </template>
    </vxe-table-column>
  </vxe-table>
</div>
</template>

<script>
import { newFindGridChildrenList, newGetCompanyInfo } from '../../../../api/z-new-grid'

export default {
  name: 'treeInfo',
  data () {
    return {
      severUserInfo: {},
      datalist: [],
      defaultExpandKeys: ['999999999']
    }
  },
  methods: {
    loadChildrenMethod ({ row }) {
      return new Promise(resolve => {
        let data = {
          grade: row.grade,
          id: row.id
        }
        newFindGridChildrenList(data).then(ret => {
          if (ret.data.errcode === 0) {
            resolve(ret.data.data)
          } else {
            this.$Notice.error({ title: '获取树形结构失败', desc: ret.data.errmsg })
          }
        })
      })
    },
    newGetCompanyInfo () {
      let data = {
        id: this.severUserInfo.company_id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.children = []
          this.datalist.push(result)
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    cellClickEvent (e) {
      this.$emit('callBackTree', e)
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.newGetCompanyInfo()
  }
}
</script>

<style scoped>
.treeClass{
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.treeClass >>> .vxe-table .vxe-tree-cell{
  font-size: 8px;
  padding-left:0px
}
.treeClass>>>.vxe-table .vxe-body--row{
  background: #235CA7;
}
.treeClass>>>.vxe-header--row{
  background: #235CA7;
}
.vxe-table{
  color: white;
}
</style>
